<!--
 * @Description: 底部第一个
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: liqi
 * @LastEditTime: 2022-09-07 19:17:43
-->
<template>
  <div ref="container" style="height: 95%"></div>
</template>

<script>
import { Area } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  computed: {},
  methods: {
    loadChart() {
      fetch(
        "https://gw.alipayobjects.com/os/bmw-prod/360c3eae-0c73-46f0-a982-4746a6095010.json"
      )
        .then((res) => res.json())
        .then((originalData) => {
          let cnt = 2;
          const area = new Area(this.$refs["container"], {
            data: originalData.slice(0, cnt),
            xField: "timePeriod",
            yField: "value",
            xAxis: {
              range: [0, 1],
            },
            tooltip: {
              domStyles: {
                "g2-tooltip": {
                  backgroundColor: "#03255f",
                  color: "#fff",
                },
              },
            },
          });
          area.render();

          const interval = setInterval(() => {
            if (cnt === originalData.length) {
              clearInterval(interval);
            } else {
              cnt += 1;
              area.changeData(originalData.slice(0, cnt));
            }
          }, 400);
        });
    },
  },
  created() {},
  mounted() {
    this.loadChart();
  },
};
</script>
<style scoped>
</style>